import React, { useState } from "react";

import "./components/JavascriptEditor/style/index.css";
import JavascriptEditor from "./components/JavascriptEditor";
import ReactPlayground from "./components/ReactPlayground";

import { delay } from "./utils";

export default function App() {
  const [code, updateCode] = useState<string>(`
(props) => {
  useEffect(()=>{
    console.log(props);

    var myChart = echarts.init(divRef.current);
    myChart.setOption({
            title: { text: 'ECharts 入门示例' },
            tooltip: {},
            xAxis: {
                data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        });
  }, []);

  const [count, updateCount] = useState(0)
  const divRef = useRef();
  const {xm} = props; 
  // props 能拿到值;
  
  return (
    <>
      <div style={{color: "red"}}>
        <div>内部状态: {count} <button onClick={()=>updateCount(count+1)}>add</button></div>
        <div>外部传入:{xm} </div>
      </div>
      <div ref={divRef} style={{ width: 400, height: 400 }}></div>
    </>
    );
}        
  `);

  return (
    <>
      <div style={{ display: "flex", height: "100%" }}>
        <div style={{ flex: "1 1 0px", overflow: "auto" }}>
          <JavascriptEditor
            defaultValue={code}
            onSave={(value) => {
              return delay(500).then(() => {
                updateCode(value);
              });
            }}
          />
        </div>
        <div style={{ flex: "0 0 40%", backgroundColor: "#f3f4fa", padding: 16, overflow:"auto" }}>
          <ReactPlayground
            code={code}
            codeProps={{ xm: "张三" }}
          ></ReactPlayground>
        </div>
      </div>
    </>
  );
}
